<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圣诞树</title>
  <style>
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      overflow: hidden;
    }

    div {
      margin: 0;
      padding: 0;
      border: 0;
    }

    .canvas {
      display: block;
      margin: 40px auto;
    }
    .nav {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 27px;
      background-color: white;
      color: black;
      text-align: center;
      line-height: 25px;
    }

    a {
      color: black;
      text-decoration: none;
      border-bottom: 1px dashed black;
    }

    a:hover {
      border-bottom: 1px solid red;
    }

    .previous {
      float: left;
      margin-left: 10px;
    }

    .next {
      float: right;
      margin-right: 10px;
    }

    .green {
      color: green;
    }

    .red {
      color: red;
    }

    textarea {
      width: 100%;
      height: 100%;
      border: 0;
      padding: 0;
      margin: 0;
      padding-bottom: 20px;
    }

    .block-outer {
      float: left;
      width: 22%;
      height: 100%;
      padding: 5px;
      border-left: 1px solid black;
      margin: 30px 3px 3px 3px;
    }

    .block-inner {
      height: 68%;
    }

    .one {
      border: 0;
    }

    .h2 {

      width: 100%;
      text-align: center;
      font-weight: 800;
      font-size: 35px;
      color: #f35626;
      background-image: -webkit-linear-gradient(92deg, #b83007, #feab3a, #0fb366);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      -webkit-animation: hue 5s infinite linear;
      animation: hue 5s infinite linear;
      position: relative;
    }
    @-webkit-keyframes hue {
      0% {
        opacity: 0.3;
        -webkit-transform: scale(0.75);
        -webkit-filter: hue-rotate(0deg);
      }
      25% {
        opacity: 0.7;
        -webkit-transform: scale(1);
        -webkit-filter: hue-rotate(0deg);
      }

      50% {
        opacity: 1;
        -webkit-transform: scale(1.2);
        -webkit-filter: hue-rotate(-360deg);
      }
      75% {
        opacity: 0.7;
        -webkit-transform: scale(1);
        -webkit-filter: hue-rotate(-360deg);
      }
      100% {
        opacity: 0.5;
        -webkit-transform: scale(0.75);
        -webkit-filter: hue-rotate(-360deg);
      }
    }
  </style>
</head>

<body>
  <div class="">
    <canvas class="canvas" id="c" height="856" width="370"></canvas>
    <div class="h2">圣诞快乐</div>
  </div>
</body>

<script>
  var c = document.getElementsByTagName('canvas')[0];
  var a = c.getContext('2d');
</script>

<script>
  M = Math;
  Q = M.random;
  J = [];
  U = 16;
  T = M.sin;
  E = M.sqrt;
  for (O = k = 0; x = z = j = i = k < 200;)
    with(M[k] = k ? c.cloneNode(0) : c) {
      width = height = k ? 32 : W = 370;
      with(getContext('2d'))
      if (k > 10 | !k)

        for (
          font = '60px Impact',
          V = 'rgba('; I = i * U, fillStyle = k ? k == 13 ? V + '205,205,215,.15)' :
          V + (147 + I) + ',' + (k % 2 ? 128 + I : 0) + ',' + I + ',.5)' : '#cca', i < 7;)

          beginPath(fill(arc(U - i / 3, 24 - i / 2, k == 13 ? 4 - (i++) / 2 : 8 - i++, 0, M.PI * 2, 1)));

      else
        for (; x = T(i),
          y = Q() * 2 - 1,
          D = x * x + y * y,
          B = E(D - x / .9 - 1.5 * y + 1),
          R = 67 * (B + 1) * (L = k / 9 + .8) >> 1,
          i++ < W;
        )

          if (D < 1)
            beginPath(strokeStyle = V + R + ',' + (R + B * L >> 0) + ',40,.1)'),
            moveTo(U + x * 8, U + y * 8),
            lineTo(U + x * U, U + y * U),
            stroke();

      for (
        y = H = k + E(k++) * 25,
        R = Q() * W; P = 3, j < H;)
        J[O++] = [
          x += T(R) * P + Q() * 6 - 3, y += Q() * U - 8,
          z += T(R - 11) * P + Q() * 6 - 3,
          j / H * 20 + ((j += U) > H & Q() > .8 ? Q(P = 9) * 4 : 0) >> 1
        ]
    }

  setInterval(function G(m, l) {
    A = T(D - 11);
    if (l)

      return (
        m[2] - l[2]) * A + (l[0] - m[0]) * T(D);
    a.clearRect(0, 0, W, W);
    J.sort(G);

    for (
      i = 0; L = J[i++]; a.drawImage(M[L[3] + 1], 207 + L[0] * A + L[2] * T(D) >> 0, L[1] >> 1)) {
      if (i == 2e3)
        a.fillText('Merry Christmas!', U, 345,368);

      if (!(i % 7))
        a.drawImage(M[13],
          ((157 * (i * i) + T(D * 5 + i * i) * 5) % W) >> 0,
          ((113 * i + (D * i) / 60) % (290 + i / 99)) >> 0);
    }
    D += .02
  }, 1)
</script>

</html>